<script setup lang="ts">
import { ref } from 'vue';

import {
  CheckCircleOutlined,
  ClockCircleOutlined,
  EyeOutlined,
  FireOutlined,
  InfoCircleOutlined,
  PictureOutlined,
  SkinOutlined,
  SyncOutlined,
} from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

import VirtualShrine3D from '../../../components/3d/VirtualShrine3D.vue';
import StatisticsPanel from './StatisticsPanel.vue';

const infoModalVisible = ref(false);

function enterVR() {
  message.info('VR功能即将上线，敬请期待！');
}

function showInfo() {
  infoModalVisible.value = true;
}
</script>

<template>
  <div class="shrine-3d-page">
    <a-card>
      <template #title>
        <div class="page-header">
          <span>🏛️ 3D虚拟祠堂</span>
          <a-space>
            <a-button type="primary" @click="enterVR" disabled>
              <EyeOutlined /> 进入VR模式
            </a-button>
            <a-button @click="showInfo">
              <InfoCircleOutlined /> 功能说明
            </a-button>
          </a-space>
        </div>
      </template>

      <!-- 3D场景 -->
      <VirtualShrine3D />

      <!-- 统计面板 -->
      <StatisticsPanel style="margin-top: 24px" />

      <!-- 功能介绍 -->
      <a-row :gutter="16" style="margin-top: 24px">
        <a-col :span="6">
          <a-card size="small" class="feature-card">
            <template #title> <SkinOutlined /> 风格切换 </template>
            <p>支持切换宋、明、清三朝建筑风格，体验不同时代的祠堂样式</p>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card size="small" class="feature-card">
            <template #title> <FireOutlined /> 虚拟祭祀 </template>
            <p>在3D祠堂中进行虚拟祭拜，点击香炉进行上香仪式</p>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card size="small" class="feature-card">
            <template #title> <PictureOutlined /> NFT展示 </template>
            <p>在祠堂内展示家族NFT收藏，打造专属数字资产展馆</p>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card size="small" class="feature-card">
            <template #title> <EyeOutlined /> VR体验 </template>
            <p>支持VR设备，沉浸式体验虚拟祠堂（即将上线）</p>
          </a-card>
        </a-col>
      </a-row>

      <!-- 祠堂介绍 -->
      <a-card title="🏛️ 关于朱氏祠堂" style="margin-top: 24px">
        <a-typography-paragraph>
          <blockquote>"宗庙祭祀，以昭孝道；祠堂肃穆，以敬祖先。"</blockquote>
        </a-typography-paragraph>

        <a-typography-paragraph>
          朱氏祠堂采用明朝官式建筑风格，重檐歇山顶，朱墙金瓦，气势恢宏。
          祠堂内供奉朱氏历代祖先牌位，香火不断，钟鼓长鸣。
        </a-typography-paragraph>

        <a-typography-paragraph>
          <a-row :gutter="16">
            <a-col :span="8">
              <h4>🏗️ 建筑特色</h4>
              <ul>
                <li>重檐歇山顶</li>
                <li>朱红色墙体</li>
                <li>金黄色琉璃瓦</li>
                <li>朱漆红柱</li>
              </ul>
            </a-col>
            <a-col :span="8">
              <h4>🎭 祭祀仪式</h4>
              <ul>
                <li>春秋二祭</li>
                <li>清明祭祖</li>
                <li>重阳追思</li>
                <li>除夕守岁</li>
              </ul>
            </a-col>
            <a-col :span="8">
              <h4>📜 供奉牌位</h4>
              <ul>
                <li>太祖朱元璋</li>
                <li>成祖朱棣</li>
                <li>历代皇帝</li>
                <li>藩王宗室</li>
              </ul>
            </a-col>
          </a-row>
        </a-typography-paragraph>
      </a-card>

      <!-- 数字化特色 -->
      <a-card title="⚡ 数字化创新" style="margin-top: 24px">
        <a-timeline>
          <a-timeline-item color="green">
            <template #dot>
              <CheckCircleOutlined style="font-size: 16px" />
            </template>
            <h4>3D建模渲染</h4>
            <p>使用Three.js技术，1:1还原传统祠堂建筑</p>
          </a-timeline-item>

          <a-timeline-item color="green">
            <template #dot>
              <CheckCircleOutlined style="font-size: 16px" />
            </template>
            <h4>实时交互</h4>
            <p>支持360°旋转、缩放、平移，自由探索祠堂</p>
          </a-timeline-item>

          <a-timeline-item color="green">
            <template #dot>
              <CheckCircleOutlined style="font-size: 16px" />
            </template>
            <h4>NFT展示墙</h4>
            <p>在虚拟祠堂中展示家族数字资产</p>
          </a-timeline-item>

          <a-timeline-item color="blue">
            <template #dot>
              <ClockCircleOutlined style="font-size: 16px" />
            </template>
            <h4>VR/AR支持（开发中）</h4>
            <p>即将支持VR头显和AR设备，提供沉浸式体验</p>
          </a-timeline-item>

          <a-timeline-item color="blue">
            <template #dot>
              <ClockCircleOutlined style="font-size: 16px" />
            </template>
            <h4>多人在线（规划中）</h4>
            <p>支持家族成员同时在线，共同参与祭祀活动</p>
          </a-timeline-item>
        </a-timeline>
      </a-card>
    </a-card>

    <!-- 功能说明Modal -->
    <a-modal
      v-model:open="infoModalVisible"
      title="🎮 功能说明"
      width="700px"
      :footer="null"
    >
      <a-tabs>
        <a-tab-pane key="controls" tab="🖱️ 操作指南">
          <a-descriptions :column="1" bordered>
            <a-descriptions-item label="旋转视角">
              按住<a-tag color="blue">鼠标左键</a-tag>拖拽
            </a-descriptions-item>
            <a-descriptions-item label="缩放">
              滚动<a-tag color="blue">鼠标滚轮</a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="平移">
              按住<a-tag color="blue">鼠标右键</a-tag>拖拽
            </a-descriptions-item>
            <a-descriptions-item label="重置视角">
              点击<a-tag color="green">重置视角</a-tag>按钮
            </a-descriptions-item>
            <a-descriptions-item label="切换风格">
              点击<a-tag color="orange">风格</a-tag>按钮切换朝代
            </a-descriptions-item>
            <a-descriptions-item label="自动旋转">
              点击<a-tag color="purple">旋转</a-tag>按钮开启/关闭
            </a-descriptions-item>
          </a-descriptions>
        </a-tab-pane>

        <a-tab-pane key="features" tab="✨ 功能特色">
          <a-list>
            <a-list-item>
              <a-list-item-meta>
                <template #title>🏛️ 真实还原</template>
                <template #description>
                  基于明朝官式建筑规制，1:1还原传统祠堂样式
                </template>
              </a-list-item-meta>
            </a-list-item>
            <a-list-item>
              <a-list-item-meta>
                <template #title>🎨 三朝风格</template>
                <template #description>
                  支持宋、明、清三个朝代的建筑风格切换
                </template>
              </a-list-item-meta>
            </a-list-item>
            <a-list-item>
              <a-list-item-meta>
                <template #title>🔄 实时渲染</template>
                <template #description>
                  使用WebGL技术，流畅的3D渲染体验
                </template>
              </a-list-item-meta>
            </a-list-item>
            <a-list-item>
              <a-list-item-meta>
                <template #title>🎭 NFT展示</template>
                <template #description> 在祠堂内展示家族SBT和NFT收藏 </template>
              </a-list-item-meta>
            </a-list-item>
          </a-list>
        </a-tab-pane>

        <a-tab-pane key="roadmap" tab="🚀 开发路线">
          <a-steps direction="vertical" :current="1">
            <a-step title="Phase 1: 基础3D场景" description="✅ 已完成">
              <template #icon>
                <CheckCircleOutlined />
              </template>
            </a-step>
            <a-step title="Phase 2: 交互优化" description="🔨 进行中">
              <template #icon>
                <SyncOutlined spin />
              </template>
            </a-step>
            <a-step title="Phase 3: VR/AR支持" description="📅 规划中">
              <template #icon>
                <ClockCircleOutlined />
              </template>
            </a-step>
            <a-step title="Phase 4: 多人在线" description="📅 规划中">
              <template #icon>
                <ClockCircleOutlined />
              </template>
            </a-step>
          </a-steps>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
  </div>
</template>

<style scoped lang="scss">
.shrine-3d-page {
  .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .feature-card {
    :deep(.ant-card-head-title) {
      font-size: 14px;
    }

    p {
      margin: 0;
      font-size: 13px;
      color: #666;
    }
  }

  blockquote {
    padding-left: 16px;
    margin: 16px 0;
    font-style: italic;
    color: #666;
    border-left: 4px solid #1890ff;
  }

  h4 {
    margin-top: 0;
    color: #1890ff;
  }

  ul {
    padding-left: 20px;
    margin: 8px 0;

    li {
      margin: 4px 0;
    }
  }
}
</style>
